<template>
  <div id="app">
    <h2>欢迎光临_vue开发的收银系统-水果店</h2>
    <table>
      <tr>
        苹果10元一斤，折扣八折
      </tr>
      <tr>
        请输入你要购买的斤数: <input type="text" v-model="num" />
      </tr>
      <tr>
        <button @click="btn">结账买单</button>
      </tr>
      <tr>
        结账单:总价：{{zong}}元,折后价:{{zhe}}元,省了{{sheng}}元
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num: "",
      zong:"0",
      zhe:"0",
      sheng:"0"
    };
  },
  methods: {
    btn(){
         this.zong = this.num * 10 
         this.zhe = this.zong * 0.8
         this.sheng = this.zong - this.zhe
    }
  },
};
</script>

<style>
#app {
  text-align: center;
  width: 800px;
  height: 300px;
  border: 1px solid #000;
}
#app table {
  width: 100%;
  text-align: center;
}
#app table tr {
    display: block;
    height: 20px;
    margin-bottom: 15px;
}
</style>